<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .pic1 {
            display: block;
            width: 130px;
            height: 35px;
            float: left;
            margin-top: 20px;
        }

        .header {
            height: 75px;
            /* border: 1px solid black; */
            border-bottom: 1px solid #00cad8;
        }

        .header p:nth-of-type(1) {
            /* width: 100px; */
            float: left;
            margin-top: 25px;
            margin-left: 10px;
            padding-left: 10px;
            border-left: 1px solid #00cad8;
        }

        .header p:nth-of-type(2) {
            float: right;
            margin-top: 25px;
            margin-right: 20px;
        }

        main {
            width: 760px;
            height: 460px;
            /* border: 1px solid black; */
            margin: auto;
            margin-top: 160px;
        }

        .left {
            /* background-color: red; */
            width: 475px;
            height: 460px;
            float: left;
        }

        .right {
            float: left;
            background-color: #f8f9fa;
            width: 285px;
            height: 460px;
        }

        .tip {
            height: 100px;
        }

        .tip p:nth-child(1) {
            /* margin-top: 10px; */
            font-weight: bold;
            font-size: 17px;
            margin-top: 50px;
            margin-left: 40px;
            float: left;
        }

        .tip p:nth-child(2) {
            float: left;
            margin-left: 45px;
            font-size: 15px;
            color: #999999;
            margin-top: 52px;
        }

        .kuang {
            /* float: left; */
            margin-left: 40px;
            font-size: 12px;
            color: #999999;
            /* margin-top: 10px; */
        }

        .kuang input:nth-of-type(1) {
            margin-top: 10px;
            width: 110px;
            height: 45px;
            border: none;
            border-radius: 10px;
            border: 1px solid #999999;
            padding-left: 10px;
        }

        .kuang input:nth-of-type(2) {
            margin-left: 5px;
            width: 260px;
            height: 45px;
            border: none;
            border-radius: 10px;
            border: 1px solid #999999;
            padding-left: 10px;
            font-size: 10px;
        }

        .kuang input:nth-of-type(3) {
            width: 300px;
            height: 45px;
            border: none;
            border-radius: 10px;
            border: 1px solid #999999;
            padding-left: 10px;
            margin-top: 17px;
        }

        .kuang span {
            margin-left: 20px;
        }

        .kuang p:nth-of-type(2) {
            float: right;
            font-weight: bold;
            color: black;
            margin-top: 18px;
            margin-right: 40px;
        }

        .deng {
            width: 390px;
            height: 45px;
            margin-left: 40px;
            border: none;
            border-radius: 10px;
            border: 1px solid #999999;
            padding-left: 10px;
            margin-top: 17px;
            text-align: center;
            color: white;
            background-color: #00d2e1;
            display: block;
        }

        .xuan {
            margin-left: 40px;
            margin-top: 20px;
        }

        .one {
            font-size: 13px;
            color: #999999;
        }

        .two {
            font-size: 13px;
        }

        .other {
            margin-left: 40px;
            font-size: 13px;
            margin-top: 50px;
        }

        .right p:nth-of-type(1) {
            font-size: 19px;
            text-align: center;
            font-weight: bold;
            margin-top: 100px;
        }

        .pic2 {
            margin-left: 70px;
            margin-top: 55px;
        }

        .right p:nth-of-type(2) {
            font-size: 12px;
            margin-top: 60px;
            text-align: center;
        }

        /* body {
            height: 100%;
            background-image: linear-gradient(to right bottom, #4268a1, #007aa1, #008688, #378c64, #778c48);
        } */
    </style>
</head>

<body>
    <p></p>
    <div class="header">
        <img src="images/logo.png" class="pic1">
        <p>登录/注册</p>
        <p>适老及无障碍</p>
    </div>
    <main>
        <div class="left">
            <div class="tip">
                <p>手机号登录/注册</p>
                <p>密码登录</p>
            </div>
            <div class="kuang">
                <p>新用户验证成功即自动注册</p>
                <input type="text" value="86">
                <input type="text" placeholder="请输入用户名">
                <input type="text" placeholder="密码">
                <input type="text" placeholder="重复密码">重复密码
                <input type="text" placeholder="昵称">昵称
                <span>请输入密码</span>
                <p>输入密码</p>
            </div>
            <input type="text" value="登录/注册" class="deng">
            <input type="checkbox" class="xuan"><span class="one">已阅读并同意</span><span class="two">《去哪儿用户协议》，《隐私政策》</span>
            <p class="other">其他方式登录</p>
        </div>
        <div class="right">
            <p>手机扫码安全登录</p>
            <img src="images/二维码.png" class="pic2">
            <p>去哪手机客户端/微信 扫一扫</p>
        </div>
    </main>
    <script src="axios.js"></script>
    <script src="ajax.js"></script>
    <script>
        let op = document.querySelector('p')
        let oInputs = document.querySelectorAll("input")
        let checkbox = document.querySelector('.xuan')
        checkbox.addEventListener('change', function () {
            if (this.checked) {
                axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
                oInputs[oInputs.length - 2].onclick = function () {
                    console.log(oInputs[1].value);
                    console.log("ok");
                    axios({
                        method: "post",
                        url: "http://localhost:8888/users/register",
                        data: {
                            username: oInputs[1].value,
                            password: oInputs[2].value,
                            rpassword: oInputs[3].value,
                            nickname: oInputs[4].value,
                        }
                    }).then(function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            location.href = "02login.html"
                        } else {
                            alert("注册失败")
                        }
                    })

                }

            }
        })










            // let params = {
            //     username: oInputs[1].value,
            //     password: oInputs[2].value,
            // };
            // ajax({
            //     url: "http://localhost:8888/users/register",
            //     type: "post",
            //     params,
            //     fn(resData) {
            //         console.log(resData);
            //         resData = JSON.parse(resData);
            //         if (resData.code == 0) {
            //             oP.innerText = "注册失败";
            //         }
            //         if (resData.code == 1) {
            //             location.href = "05login.html";
            //         }
            //     },
            // })

    </script>
</body>

</html>